﻿<MCard MaxWidth="500"
       Class="mx-auto">
    <MToolbar Color="@(_selection.Count>0 ? "grey darken-4" : "deep-purple accent-4")"
              Dark>
        @if (!(_selection.Count > 0))
        {
            <MAppBarNavIcon></MAppBarNavIcon>
        }
        else
        {
            <MButton Icon
                 OnClick="()=>_selection = new List<string>()">
                <MIcon>mdi-close</MIcon>
            </MButton>
        }

        <MToolbarTitle>
            @(_selection.Count>0 ? $"{_selection.Count} selected" : "Photos")
        </MToolbarTitle>

        <MSpacer></MSpacer>

        <ScaleTransition>
            <MButton If="@(_selection.Count>0)"
                     Icon>
                <MIcon>mdi-export-variant</MIcon>
            </MButton>
        </ScaleTransition>
        <ScaleTransition>
            <MButton If="@(_selection.Count>0)"
                     Icon>
                <MIcon>mdi-delete</MIcon>
            </MButton>
        </ScaleTransition>

        <MButton Icon>
            <MIcon>mdi-dots-vertical</MIcon>
        </MButton>
    </MToolbar>

    <MCardText>
        <MSelect @bind-Value="_selection"
                 Items="_items"
                 ItemValue="r=>r"
                 ItemText="r=>r"
                 Multiple
                 Label="Select an option"></MSelect>
    </MCardText>
</MCard>

@code {
    private List<string> _selection = new List<string>();
    private List<string> _items = new List<string>
        {
            "Foo", "Bar", "Fizz", "Buzz"
        };
}